Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

1559 Add informational modal to ZAP Search homepage #1561

Open
wants to merge 9 commits into
base: develop
Choose a base branch
from
Open

1559 Add informational modal to ZAP Search homepage #1561

wants to merge 9 commits into from

Conversation

dhochbaum-dcp
Copy link
Collaborator

@dhochbaum-dcp dhochbaum-dcp commented Oct 21, 2024 •
edited
Loading

  • Add a modal that users see when they visit ZAP Search that directs them to the new subscriptions page
  • Designs can be found here but we don't need to follow designs exactly if there is an existing modal component in ZAP Search we can use. However, copy should be as seen in designs
  • User can dismiss the modal and it doesn't reappear when navigating between pages in the app
  • Modal has "Do not show this message again" checkbox. If checked, the user should not see the message again when they visit the app again in the same browser.
  • Link to `/subscribe" page

The route to the subscribe page does not exist, and so linking to the subscribe route completely breaks the site. Once subscribe route exists, I can switch the link, and it will complete #1559

@netlify Netlify
Copy link

netlify bot commented Oct 21, 2024 •
edited
Loading

✅ Deploy Preview for labs-zap ready!

Name Link
🔨 Latest commit 8bbb2c4
🔍 Latest deploy log https://app.netlify.com/sites/labs-zap/deploys/673219b2e7746e000885748e
😎 Deploy Preview https://deploy-preview-1561--labs-zap.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@TylerMatteo
Copy link
Contributor

@dhochbaum-dcp The code lgtm but can you get this up in a preview deploy for @jessicashanshanhuang?

@dhochbaum-dcp dhochbaum-dcp marked this pull request as ready for review October 25, 2024 14:21
@dhochbaum-dcp dhochbaum-dcp requested a review from a team as a code owner October 25, 2024 14:21
@dhochbaum-dcp dhochbaum-dcp marked this pull request as draft October 25, 2024 14:22
@dhochbaum-dcp
Copy link
Collaborator Author

@dhochbaum-dcp The code lgtm but can you get this up in a preview deploy for @jessicashanshanhuang?

One already exists: https://deploy-preview-1561--labs-zap.netlify.app/projects

@jessicashanshanhuang
Copy link

jessicashanshanhuang commented Oct 30, 2024 •
edited
Loading

Hey @dhochbaum-dcp, the module looks great!

I was wondering is it possible to change the background overlay color to #F1F2F4 and the module background color to #FBF0E9?

@dhochbaum-dcp
Copy link
Collaborator Author

Hey @dhochbaum-dcp, the module looks great!

I was wondering is it possible to change the background overlay color to #F1F2F4 and the module background color to #FBF0E9?

No problem @jessicashanshanhuang - the deploy preview is updated with the new colors.

@jessicashanshanhuang
Copy link

@dhochbaum-dcp the new colors look great!

I also noticed that the module is not centered vertically (it is centered horizontally), so once that is fixed the positioning should be good to go.

For the box shadow color, decrease the opacity to around 70%.

@dhochbaum-dcp
Copy link
Collaborator Author

@dhochbaum-dcp the new colors look great!

I also noticed that the module is not centered vertically (it is centered horizontally), so once that is fixed the positioning should be good to go.

For the box shadow color, decrease the opacity to around 70%.

I've centered the module vertically. Can you please clarify what you mean by the box shadow color? The box-shadow for the modal is currently box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1);. If I change the 0.1 to 0.7, it looks like the below:
image

@jessicashanshanhuang
Copy link

I've centered the module vertically. Can you please clarify what you mean by the box shadow color? The box-shadow for the modal is currently box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1);. If I change the 0.1 to 0.7, it looks like the below: image

I see, I was trying to replicate the softer blur drop shadow in the wireframe by adjusting the opacity.

I think the best choice would be to go back to box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1) but specify the shadow to only appear the bottom of the box and have a blur. Also the positioning should be shifted slightly down (I think we have it on 4px on the design).

Screenshot 2024-10-30 at 1 26 10 PM Screenshot 2024-10-30 at 1 26 45 PM

@dhochbaum-dcp
Copy link
Collaborator Author

@jessicashanshanhuang Updates made, let me know if it looks good to go.

@jessicashanshanhuang
Copy link

@dhochbaum-dcp Looks good to go 🫡

@dhochbaum-dcp dhochbaum-dcp marked this pull request as ready for review October 31, 2024 19:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@TylerMatteo TylerMatteo TylerMatteo approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@dhochbaum-dcp @TylerMatteo @jessicashanshanhuang